<template>
	<div class="home">
		<div class="main">
			<div class="sidebar animate__animated animate__zoomIn">
				<ul>
					<li v-for="(item, index) in navbar" :key="index" @click="tab(item)"
						:class="{ select: $store.state.tabid == item.id }">
						<i :class="item.icon"></i>
						<span>{{ item.name }}</span>
					</li>
				</ul>
			</div>
			<div class="cont clearfix">
				<template v-if="$store.state.tabid == 1">
					<planlist></planlist>
				</template>
				<template v-if="$store.state.tabid == 2">
					<publicorderlist></publicorderlist>
				</template>
				<template v-if="$store.state.tabid == 3">
					<orderlist></orderlist>
				</template>
				<template v-if="$store.state.tabid == 4">
					<userinfo></userinfo>
				</template>
			</div>
		</div>
	</div>
</template>
<script>
import planlist from '@/components/planlist'
import publicorderlist from '@/components/publicorderlist'
import orderlist from '@/components/orderlist'
import userinfo from '@/components/userinfo'
export default {
	name: 'Home',
	data() {
		return {
			selected: this.$store.state.tabid,
			navbar: [
				{
					id: 1,
					name: '方案模板',
					icon: 'el-icon-s-operation',
					desc: '我莎莎打开了放假按时来得快积分'
				},
				{
					id: 2,
					name: '公共方案',
					icon: 'el-icon-collection',
					desc: '我莎莎打开了放假按时来得快积分'
				},
				{
					id: 3,
					name: '我的方案',
					icon: 'el-icon-notebook-2',
					desc: '我莎莎打开了放假按时来得快积分'
				},
				{
					id: 4,
					name: '个人中心',
					icon: 'el-icon-user',
					desc: '我莎莎打开了放假按时来得快积分'
				}
			]
		}
	},
	mounted() {
		let token = this.$storage.localGet('userinfo');
		if (token.logincode == undefined) {
			this.$router.push('/login');
		}
	},
	components: { planlist, orderlist, userinfo, publicorderlist },
	methods: {
		tab(item) {
			this.$store.commit('tabTips', item.id);
			console.log(this.$store.state.tabid);
		},
	}
}
</script>
<style lang="less" scoped>
.home {
	width: 100%;
	height: auto;
	bottom: 0;

	.main {
		height: auto;
		margin: 0 auto;
		@media screen and (max-width: 800px) {
			width: 100%;
		}
		@media screen and (min-width: 801px) {
			width: 1000px;
		}
		padding-bottom: 30px;
		position: relative;
	}

	.sidebar {
		height: auto;
		padding: 15px;
		margin: 0 10px 10px;
		border-radius: 0 0 12px 12px;
		background-color: #fff;
		box-shadow: 0 1px 0 0 rgba(0, 0, 0, .5);

		ul {
			display: flex;
			list-style: none;
			padding: 0;
		}

		li {
			flex: 1;
			padding: 10px 0;
			text-align: center;
			font-weight: 700;
			cursor: pointer;
			transition: .2s;
			@media screen and (max-width: 800px) {
				font-size: 14px;
			}
			@media screen and (min-width: 801px) {
				font-size: 16px;
			}


			&:last-child {
				border: 0;
			}

			&.select,
			&:hover {
				color: #FA7B00;
			}

			i {
				margin-right: 5px;
			}
		}
	}
}</style>